(function(){
    let bannerBox=document.getElementById("bannerBox");
    let wrapper=document.querySelector(".wrapper");//要移动的容器 wrapper
    let w=bannerBox.offsetWidth;//每张图片的宽度
    let step=0;//步长
    let count=4;//图片的个数
    let timer=null;//定时器

    function autoPlay(){//自动轮播
       step++;
       if(step>count-1){
          wrapper.style.transitionDuration="0s";//无动画
          wrapper.style.left="0px";//当显示最后一幅图片的时候，立刻无动画跳转到第一幅图
          wrapper.offsetWidth;//更新队列--->设置不会更新队列，输出元素属性会更新队列
          wrapper.style.transitionDuration="0.3s";//重新开启动画
          step=1;//然后动画 由 0(第一幅图)--1(第二幅图)
       }
       wrapper.style.left=`-${w*step}px`;
    }
    timer=setInterval(autoPlay,1000)

    //移入mouseenter  移出mouseleave  没有冒泡
    bannerBox.onmouseenter=function(){//移入轮播图停止
       clearInterval(timer)
       timer=null;
    }
    bannerBox.onmouseleave=function(){//移出轮播图重新开始
        timer=setInterval(autoPlay,1000)
    }

    //点击---事件委托:将绑定事件的方法委托给祖先元素，减少事件的绑定，提高性能
    bannerBox.onclick=function(e){
       //console.log(e.target);//目标元素
       //console.log(e.target.tagName);//目标元素 标签名 大写
       //console.log(e.target.className)
       if(e.target.tagName==="SPAN"){
          console.log("小圆点");
       }
       if(e.target.className.includes("prev")){//上一个按钮
          step--;
          if(step<0){
            wrapper.style.transitionDuration="0s";//停止动画
            wrapper.style.left=`-${w*(count-1)}px`;//展示倒数第一幅图片
            wrapper.offsetWidth;//更新队列--->设置不会更新队列，输出元素属性会更新队列
            wrapper.style.transitionDuration="0.3s";//重新开启动画
            step=count-2;//倒数第二幅
          }
          wrapper.style.left=`-${w*step}px`;
       }
       if(e.target.className.includes("next")){//下一个按钮
         autoPlay();
       }
    }


})()